<template>
    <div class="mod-config">
        <!--  头部  -->
        <div>
            <!--  选择审批类型 -->
            <el-select v-model="value" placeholder="请选择" style="margin-right: 20px" @change="handleChange">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-form :inline="true" style="float:right">
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" circle @click="search"></el-button>
                </el-form-item>
                <el-date-picker
                    v-model="searchTime"
                    type="date"
                    placeholder="选择申请日期"
                    align="right"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form>

        </div>
        <el-divider></el-divider>
        <!--  主体表格  -->
        <div class="table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" header-align="center" align="center" width="100" label="序号">
                    <template #default="scope">
                        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="reason" label="理由说明" width="230" align="center"></el-table-column>
                <el-table-column prop="type.name" label="请假类型" width="230" align="center" v-if="isLeave"></el-table-column>
                <el-table-column prop="address" label="出差地点" width="230" align="center" v-if="!isLeave"></el-table-column>
                <el-table-column prop="resources" label="证明文件" width="230" align="center">
                    <template #default="scope">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.resources"
                            :preview-src-list="[scope.row.resources]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="230" align="center"></el-table-column>
                <el-table-column prop="endTime" label="开始时间" width="230" align="center"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="230" align="center"></el-table-column>
            </el-table>
            <el-pagination
                    align="left"
                    @current-change="changePage"
                    background
                    layout="total, prev, pager, next"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import dayjs from "dayjs";
import index from "vuex";

export default {
    data() {
        return {
            // 当前页
            currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
            // 一共多少页
            pageSize: 10,
            // 一共多少条
            total: 10,
            //是否为搜索状态
            isSearch:false,
            //选择的记录类型的值
            value:'',
            //记录类型选项
            options:[],
            //根据记录类型和当前用户id查询的表格数据
            tableData: [],
            //当前是否为请假状态
            isLeave:'',
            //选择查询的日期
            searchTime:'',
            //时间选择器
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            }
        }
    },
    mounted() {
        let that = this;
        that.isSearch = false;
        that.loadOptions();
    },
    methods: {
        // 时间格式化
        dayjs,
        //加载请假和出差记录类型
        loadOptions(){
            this.$http('/dict/type','POST',{
                type:'approvalType'
            },(resp)=>{
                let data = resp.data;
                if(data.code === 20000){
                    for(let i=0;i<data.data.length;i++){
                        if(data.data[i].name === '请假' || data.data[i].name === '出差'){
                            this.options.push({
                                value:data.data[i].id,
                                label:data.data[i].name
                            })
                        }
                    }
                    this.value = this.options[0].value;
                    this.isLeave = this.options[0].label === '请假';
                    this.loadData();
                }else{
                    this.$message.error(resp.msg);
                }
            })
        },
        //处理选择变化
        handleChange(){
            let that = this;
            if(that.isLeave){
                that.isLeave = false;
            }else {
                that.isLeave = true;
            }
            if(that.isSearch){
                that.search();
            }else {
                that.tableData = [];
                this.loadData();
            }
        },
        // 加载数据
        loadData() {
            let that = this
            if(that.isLeave){
                //加载请假数据
                that.$http('/document/leaveList','POST',{
                    typeId:that.value,
                    pageNum:that.currentPage
                },(resp)=>{
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if(data.list.length<=0){
                        this.currentPage = 1;
                        that.reloadLeaveData();
                    }else {
                        let message = '暂无'
                        for(let e of that.tableData){
                            this.leaveInfo(e,message)
                        }
                    }
                    that.currentPage = resp.data.data.currentPage;
                    that.pageSize = resp.data.data.pageSize;
                    that.total = resp.data.data.total;
                })
            }else {
                //加载出差数据
                that.$http('/document/travleList','POST',{
                    typeId:that.value,
                    pageNum:that.currentPage
                },(resp)=>{
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if(data.list.length<=0){
                        this.currentPage = 1;
                        that.reloadTravleData();
                    }else {
                        let message = '暂无'
                        for(let e of that.tableData){
                            this.travleInfo(e,message)
                        }
                    }
                    that.currentPage = resp.data.data.currentPage;
                    that.pageSize = resp.data.data.pageSize;
                    that.total = resp.data.data.total;
                })
            }

        },
        //请假信息
        leaveInfo(e,message){
            if(e.reason === '' || e.reason === null){
                e.reason = message;
            }
            if(e.type === null){
                e.type.name = message;
            }
            if(e.startTime === '' || e.startTime === null){
                e.startTime = message;
            }else {
                e.startTime = dayjs(e.startTime).format('YYYY-MM-DD HH:mm:ss');
            }
            if(e.endTime === '' || e.endTime === null){
                e.endTime = message;
            }else {
                e.endTime = dayjs(e.endTime).format('YYYY-MM-DD HH:mm:ss');
            }
            if(e.createTime === '' || e.createTime === null){
                e.createTime = message;
            }else {
                e.createTime = dayjs(e.createTime).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        //出差信息
        travleInfo(e,message){
            if(e.reason === '' || e.reason === null){
                e.reason = message;
            }
            if(e.address === '' || e.address === null){
                e.address = message;
            }
            if(e.startTime === '' || e.startTime === null){
                e.startTime = message;
            }else {
                e.startTime = dayjs(e.startTime).format('YYYY-MM-DD HH:mm:ss');
            }
            if(e.endTime === '' || e.endTime === null){
                e.endTime = message;
            }else {
                e.endTime = dayjs(e.endTime).format('YYYY-MM-DD HH:mm:ss');
            }
            if(e.createTime === '' || e.createTime === null){
                e.createTime = message;
            }else {
                e.createTime = dayjs(e.createTime).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        //再次加载请假数据
        reloadLeaveData(){
            let that = this;
            that.$http('/document/leaveList','POST',{
                typeId:that.value,
                userId:that.$store.state.user.userId,
                pageNum:that.currentPage
            },(resp)=>{
                let data = resp.data.data;
                that.tableData = data.list;
                if(data.list.length<=0){
                    this.currentPage = 1;
                }else {
                    let message = '暂无'
                    for(let e of that.tableData){
                        this.leaveInfo(e,message)
                    }
                }
            })
        },
        //再次加载出差数据
        reloadTravleData(){
            let that = this;
            //加载出差数据
            that.$http('/document/travleList','POST',{
                typeId:that.value,
                pageNum:that.currentPage
            },(resp)=>{
                let data = resp.data.data;
                that.tableData = data.list;
                if(data.list.length<=0){
                    this.currentPage = 1;
                }else {
                    let message = '暂无'
                    for(let e of that.tableData){
                        this.travleInfo(e,message)
                    }
                }
            })
        },
        // 切换分页
        changePage(page) {
            this.currentPage = page;
            this.loadData();
        },
        // 根据申请时间进行搜索
        search() {
            let that = this;
            that.isSearch = true;
            if(that.searchTime === ''){
                that.$message({
                    type: 'error',
                    message: '请先选择申请时间'
                });
                that.isSearch = false;
            }else {
                let time = dayjs(that.searchTime).format('YYYY-MM-DD');
                //当前是请假搜索
                if(that.isLeave){
                    that.$http('/document/leaveSearch','POST',{
                        searchTime:time,
                        pageNum:that.currentPage
                    },(resp)=>{
                        let data = resp.data;
                        if(data.code === 20000){
                            that.tableData = data.data.list;
                            if(data.data.list.length>0){
                                let message = '暂无';
                                for (let e of that.tableData){
                                    this.leaveInfo(e,message)
                                }
                                that.currentPage = resp.data.data.currentPage;
                                that.pageSize = resp.data.data.pageSize;
                                that.total = resp.data.data.total;
                            }else {
                                that.reLeaveSearch();
                            }
                        }
                    })
                }
                //当前是出差搜索
                else {
                    that.$http('/document/travleSearch','POST',{
                        searchTime:time,
                        pageNum:that.currentPage
                    },(resp)=>{
                        let data = resp.data;
                        if(data.code === 20000){
                            that.tableData = data.data.list;
                            if(data.data.list.length>0){
                                let message = '暂无';
                                for (let e of that.tableData){
                                    this.travleInfo(e,message)
                                }
                                that.currentPage = resp.data.data.currentPage;
                                that.pageSize = resp.data.data.pageSize;
                                that.total = resp.data.data.total;
                            }else {
                                that.reTravleSearch();
                            }
                        }
                    })
                }
            }
        },
        // 重新搜索请假数据
        reLeaveSearch(){
            let that = this;
            that.currentPage = 1;
            that.$http('/document/leaveSearch','POST',{
                searchTime:that.searchTime,
                pageNum:that.currentPage
            },(resp)=>{
                let data = resp.data;
                if(data.code === 20000){
                    that.tableData = data.data.list;
                    if(data.data.list.length>0){
                        let message = '暂无';
                        for (let e of that.tableData){
                            this.leaveInfo(e,message)
                        }
                        that.currentPage = resp.data.data.currentPage;
                        that.pageSize = resp.data.data.pageSize;
                        that.total = resp.data.data.total;
                    }else {
                        that.currentPage = 1;
                        that.pageSize = 10;
                        that.total = 0;
                        that.$message({
                            type: 'info',
                            message: '未搜索到结果，请重试！'
                        });
                    }
                }
            })
        },
        //重新搜索出差数据
        reTravleSearch(){
            let that = this;
            that.$http('/document/travleSearch','POST',{
                searchTime:that.searchTime,
                pageNum:that.currentPage
            },(resp)=>{
                let data = resp.data;
                if(data.code === 20000){
                    that.tableData = data.data.list;
                    if(data.data.list.length>0){
                        let message = '暂无';
                        for (let e of that.tableData){
                            this.travleInfo(e,message)
                        }
                        that.currentPage = resp.data.data.currentPage;
                        that.pageSize = resp.data.data.pageSize;
                        that.total = resp.data.data.total;
                    }else {
                        that.currentPage = 1;
                        that.pageSize = 10;
                        that.total = 0;
                        that.$message({
                            type: 'info',
                            message: '未搜索到结果，请重试！'
                        });
                    }
                }
            })
        }
    }
}
</script>
<style lang="less">
.table {
  margin-top: 20px;
}
</style>